axios的使用

axios是vue官方推荐的http库，详情见官方中文文档。

安装：

npm install axios

安装依赖：

npm install --save axios vue-axios

配置模板：

//main.js中
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
//然后你就能愉快地使用axios啦

如果不想这样安装，也可以快速引用它：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如何使用：

有好几种方法，get post delete put patch 什么的，不过我通常就用get和post两种，所以我就记录这种中的使用方法了。

let data = {   //要传的参数
    'loginName':'123456',
    'passWord':'123456',
    'updateSign':'52af3ce8a82f62707789fe00899ed3f0',
    'isLogin':'1'
}


//post请求

this.axios.post('/api/user/sickUserLogin/3',data)
    .then((response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
 
    
//get请求

this.axios.get('/api/user/sickUserLogin/3',{params:data})
    .then((response) => {
        console.log(response.data);
        console.log(response);   
    })
    .catch(function (error) {
        console.log(error);
    });

这里要注意一点的是：get和post请求的传参方式是不一样的，原因可以参考这里

axios.get('url', {params: data});
axios.post('url', data);

//get请求的参数是拼接url字符串传递的；
//post请求的参数是通过data请求主体传递的；

参数格式：

axios的默认参数格式是json字符串，传参方式就像上面那个demo一样即可。但是如果你想以key：value的方式传参，则需要做一点改变：参考这里
注意：如果你的请求方法是post，又规定了参数格式是application/x-www-form-urlencoded，则必须要使用下面这些方法中的一种。（我在写demo的时候测试了一下，post方法下json传参格式是失败的，必须要改成键值对的格式，否则会报错）
主要推荐这种写法：

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

这个方法需要先安装一下qs：

npm install qs

import qs from 'qs'

Vue.prototype.qs = qs;  //全局定义，使用的时候用this.qs.stringify(data)即可

还有另一种写法浅显易懂：

var params = new URLSearchParams();    //这种写法不需要引入qs
params.append('collectId',"16");       //你要传给后台的参数值 key/value
params.append('collectTye',"2");
params.append('isCancel',"2",);


this.$axios({
    method: 'post',
    url:url,
    data: params 
}).then((res)=>{

})

设置axios的baseURL：

//在main.js中：
Vue.prototype.axios = axios; //添加原型对象,组件中可以直接使用this.axios
axios.defaults.baseURL = 'http://api.eeesys.com:18087/';
//这些具体的写法可以多看几遍文档，就懂了，我也不是很懂
//根据我的测验，这样写了之后，请求会忽略掉proxyTable中的配置，直接请求这个地址，这样在生产环境下就可以跨域了，不知道是不是这样的

重新定义一个axios实例：

const $axios = axios.create({
    baseURL: 'http://api.eeesys.com:18087/',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});

// 初始化默认post header,这里规定了post请求的传参格式是application/x-www-form-urlencoded
//如果不这样写，后台接收到的参数是null
$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = $axios;

这样就可以在代码中使用自己定义的axios实例，没有配置的属性会继承lib/defaults.js文件中的设置